<template>
  <div>
      <div>
          <div>actionCount: {{ actionCount }}</div>
          <div>count1217: {{ count1217 }}</div>
          <div>count929: {{ count929 }}</div>
          <div>count0842:{{ count0842 }}</div>
          <div>count0858: {{ count0858 }}</div>
          <div>count0955: {{ count0955 }}</div>
      </div>
      <el-button @click="testAction1Event">action1</el-button>

      <el-button @click="incrementAction1217({ num: 2})">
          incrementAction1217
      </el-button>

      <el-button @click="add0929Event({ num: 2})">
        count929
      </el-button>

      <el-button @click="actionCount0842Event">
          count0842
      </el-button>

      <el-button @click="actionCount0858Event">
          count0858
      </el-button>

      <el-button @click="actionAEvent">
          actionA
      </el-button>
  </div>
</template>

<script>
    import { mapActions } from 'vuex';
    //使用mapActions 辅助函数将组件的methods映射为store.dispatch调用

    export default {
        computed: {
            actionCount() {
                return this.$store.state.actionCount;
            },
            count1217() {
                return this.$store.state.count1217;
            },
            count929() {
                return this.$store.state.count0929;
            },
            count0842() {
                return this.$store.state.count0842;
            },
            count0858() {
                return this.$store.state.count0858;
            },
            count0955() {
                return this.$store.state.count0955;
            }
        },
        data() {
            return {
                
            };
        },
        created() {

        },
        mounted() {

        },
        methods: {
            testAction1Event() {
                //this.$store.dispatch('incrementAsync');
                //支持荷载
                //this.$store.dispatch('incrementAsync',{ num: 10});
                //以对象形式分发
                this.$store.dispatch({
                    type: 'incrementAsync',
                    num: 11,
                });
            },
            //荷载
            // ...mapActions([
            //     'incrementAction1217'
            // ]),
            //可以自定义触发dispatch的方法
            ...mapActions({
                add0929Event: 'incrementAction0929'
            }),
            //组合action
            actionCount0842Event() {
                this.$store.dispatch('action0842',{ num: 2 }).then(res => {
                    console.log('actionCount0842Event',res);
                });
            },
            actionCount0858Event() {
                this.$store.dispatch('action0858',{ num: 1 }).then(res => {
                    console.log('actionCount0858Event',res);
                });
            },
            actionAEvent() {
                this.$store.dispatch('actionA',{ num: 2}).then(res=>{
                    console.log('actionAEvent',res);
                });
            }
        },
    }
</script>

<style lang='scss' scoped>

</style>